<template>
  <div>
    <van-loading v-if="!films" size="24px">加载中...</van-loading>
    <ComingList
      v-else
      v-for="film in films"
      :key="film.filmId"
      :item="film"
    ></ComingList>
  </div>
</template>

<script setup>
import { getComings } from "../../api/movieApi";
import { reactive, onMounted, toRefs } from "vue";
import ComingList from "../comming/ComingList.vue";
const state = reactive({
  films: null,
});

const { films } = toRefs(state);

onMounted(() => {
  getComings().then(({data:res}) => {
    setTimeout(() => {
      state.films = res.films;
      console.log(state.films);
    }, 1000);
  });
});
</script>

<style lang="scss" scoped>
.van-loading {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.05);
  height: 40px;
  line-height: 40px;
}
</style>
